<template>
	<view>

		<view class="orderDetail_box">

			<!-- 收货地址 -->
			<view class="orderAddress_box">
				<view class="consigneeInfor_con">
					<u-icon name="map-fill" color="#327FE8" size="60"></u-icon>
					<view class="consigneeCon">
						<view class="consigneeInfor">
							<view class="consigneeName">{{orderDetail.consignee}}</view>
							<view class="consigneeTel">{{orderDetail.mobile}}</view>
						</view>
						<view class="consigneeAddress">
							{{orderDetail.address}}
						</view>
					</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="orderGoods_con">
				<view class="goodsItem" v-for="(item,index) in goodsList" :key="index">
					<view class="goodsPic">
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
					<view class="goodsCon">
						<view class="goodsName">{{item.goods_name}}</view>
						<view class="goodsSn">条形码：{{item.goods_sn}}</view>
						<view class="goodsInfor">
							<view class="goodsPrice">{{item.rec_integral}}积分</view>
							<!-- <u-number-box v-model="item.num" :index="index" @change="numChange"></u-number-box> -->
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="orderInfor_con">
				<view class="inforTit">订单信息</view>
				<view class="inforCon">
					<view class="inforLi">
						<view class="inforLabel">订单编号</view>
						<view class="inforValue">No.{{orderDetail.order_sn}}</view>
					</view>
					<view class="inforLi">
						<view class="inforLabel">下单时间</view>
						<view class="inforValue">{{orderDetail.add_time}}</view>
					</view>
					<view class="inforLi">
						<view class="inforLabel">产品数量</view>
						<view class="inforValue">{{goodsList.length}}</view>
					</view>
					<view class="inforLi">
						<view class="inforLabel">合计金额</view>
						<view class="inforValue">¥{{orderDetail.integral}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单操作 -->
		<!-- <view class="formPost_con">
			<view class="submitBtn" @click="submitClick">配货完成</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单详情
				order_id: '',
				orderDetail: {},

				// 商品列表
				goodsList: [],
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中'
			});
			console.log(option);
			var _this = this;
			_this.order_id = option.order_id;
		},
		onReady() {
			var _this = this;
			_this.getOrderDetail();
		},
		onShow: function() {

		},
		methods: {
			// 获取订单详情
			getOrderDetail() {
				var _this = this;
				_this.$u.get('/api/shop.order/getDetail', {
					id: _this.order_id,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取订单详情==");
					console.log(res);
					_this.orderDetail = res.data;
					_this.goodsList = res.data.goodsList;
				}).catch(res => {
					console.log(res);
				})
			},

			// 修改数量
			numChange(e) {
				console.log('==修改数量==');
				console.log(e);
				var _this = this;
				var goodsIndex = e.index;
				var goodsNum = e.value;
				_this.$u.post('/api/supplier.order/editGoodsNum', {
					id: _this.goodsList[goodsIndex].id,
					num: goodsNum,
				}).then(res => {
					console.log('==修改数量结果==');
					console.log(res);
					// uni.showToast({
					// 	title: '数量修改成功',
					// 	duration: 2000
					// });
					_this.getOrderDetail();
				}).catch(res => {
					console.log(res);
				})
			},
			
			// 配货完成
			submitClick() {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定配货完成？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.$u.post('/api/supplier.order/editGoodsNum', {
								id: _this.order_id,
							}).then(res => {
								console.log(res);
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}).catch(res => {
								console.log(res);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

		}
	}
</script>

<style scoped>
	.orderDetail_box {
		padding: 0 30rpx;
	}

	/* 收货地址 */
	.orderAddress_box {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 20rpx 0;
	}

	.consigneeInfor_con {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.consigneeCon {
		flex: 2;
		margin-left: 20rpx;
	}

	.consigneeInfor {
		font-size: 28rpx;
		color: #333;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.consigneeInfor .consigneeName {
		font-weight: bold;
	}

	.consigneeInfor .consigneeTel {
		margin-left: 20rpx;
	}

	.consigneeAddress {
		font-size: 24rpx;
		color: #7D7E82;
		overflow: hidden;
		margin-top: 10rpx;
	}

	/* 商品信息 */
	.orderGoods_con {
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.goodsItem {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goodsItem:last-child {
		border-bottom: 0;
	}

	.goodsPic {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.goodsPic image {
		width: 100%;
		height: 100%;
	}

	.goodsCon {
		flex: 2;
		width: 480rpx;
		height: 150rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.goodsName {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 40rpx;
		width: 100%;
	}

	.goodsSn {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.goodsInfor {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goodsPrice {
		font-size: 28rpx;
		color: #fc9a00;
	}

	/* 订单信息 */
	.orderInfor_con {
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		margin: 20rpx 0;
	}

	.inforTit {
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 10rpx;
	}

	.inforCon {
		overflow: hidden;
	}

	.inforLi {
		overflow: hidden;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 60rpx;
	}

	.inforLabel {
		color: #999;
	}

	.inforValue {
		color: #000;
	}

	/* 订单操作 */
	.formPost_con {
		width: 100%;
		padding: 0 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
